<template>
  <views class="role_managen_amend">
    <!-- 角色管理-修改 -->
    <!-- 角色名称 -->
    <div class="character_name flex flexR">
      <div class="character_name_title Textl">角色名称:</div>
      <div class="character_name_input">
        <el-input v-model="form.role_name" placeholder="请输入角色名称" :clearable="true"></el-input>
      </div>
    </div>
    <!-- 状态 -->
    <div class="flex flexR state_list">
      <div class="character_name_title">状态:</div>
      <div class="flex state_list_btn">
        <el-radio-group v-model="form.status">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 备注 -->
    <div class="flex flexR remark_list">
      <div class="remark_name_title">备注:</div>
      <div class="remark_name_textarea">
        <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="form.remark"></el-input>
      </div>
    </div>
    <!-- 授权 -->
    <div class="flex flexR impower_list">
      <div class="impower_list_title">授权</div>
      <div class="impower_list_tree">
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="permission_id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        ></el-tree>
      </div>
    </div>
    <!-- 确定 返回 -->
    <div class="btn_list flex flexR">
      <el-button type="primary" @click="doCommit">确定</el-button>
      <el-button type @click="get_back">返回</el-button>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      form: {
        role_id: 0,
        status: "", // 状态
        remark: "", // 备注
        role_name: "" // 角色名称
      },
      defaultProps: {
        children: "list",
        label: "permission_name",
        disabled: "disabled"
      },
      data: [],
      current_path: "" // 当前路由
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region" }]);
      }
      if (node.level > 1) return resolve([]);

      setTimeout(() => {
        const data = [
          {
            name: "leaf",
            leaf: true
          },
          {
            name: "zone"
          }
        ];

        resolve(data);
      }, 500);
    },
    // 返回
    get_back() {
       this.$blackRoute({ path: "/role_managen", query: {}, that: this });
    },
    //获取数据
    getData() {
      if (this.$store.state.terrace == 1) {
        this.getEnterpriseData();
      }
      if (this.$store.state.terrace == 2) {
        this.getAgentData();
      }
      if (this.$store.state.terrace == 3) {
        this.getFacilitatorData();
      }
      this.form.status = this.form.status.toString();
    },
    getEnterpriseData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.egetRoleDetail,
        {
          role_id: this.$route.query.role_id
        }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.data = data.permissions;
      this.form.role_id = data.enterprise_role_id;
      this.form.role_name = data.enterprise_role_name;
      this.form.status = data.status;
      this.form.remark = data.remarks;
      // 设置选中的
      this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getAgentData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.agetRoleDetail,
        {
          role_id: this.$route.query.role_id
        }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.data = data.permissions;
      this.form.role_id = data.agent_role_id;
      this.form.role_name = data.agent_role_name;
      this.form.status = data.status;
      this.form.remark = data.remarks;
      // 设置选中的
      this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getFacilitatorData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.fgetRoleDetail,
        {
          role_id: this.$route.query.role_id
        }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.data = data.permissions;
      this.form.role_id = data.facilitator_role_id;
      this.form.role_name = data.facilitator_role_name;
      this.form.status = data.status;
      this.form.remark = data.remarks;
      // 设置选中的
      this.$refs.tree.setCheckedKeys(this.getActivePerm(data.permissions));
    },
    getActivePerm(perm_arr) {
      let act_item = [];
      if (perm_arr.length > 0) {
        for (let perm_obj of perm_arr) {
          if (perm_obj.is_active) {
            act_item.push(perm_obj.permission_id) &&
              (act_item = act_item.concat(
                this.getActivePerm(perm_obj.list || [])
              ));
          }
        }
      }
      return act_item;
    },
    doCommit() {
      console.log(
        "this.$refs.tree.getCheckedKeys()",
        this.$refs.tree.getCheckedKeys()
      );
      let postForm = this.form;
      postForm.permission_ids = this.$refs.tree.getCheckedKeys();
      switch (this.$store.state.terrace) {
        case 1:
          this.commitApi = this.$mapapi.esaveRole;
          break;
        case 2:
          this.commitApi = this.$mapapi.asaveRole;
          break;
        case 3:
          this.commitApi = this.$mapapi.fsaveRole;
          break;
        default:
          this.$message.error("无效角色");
          return;
      }
      let { code, msg } = this.$api.sendSync(this.commitApi, postForm),
        that = this;
      if (code != 200) {
        this.$message.error(msg);
        return;
      } else {
        this.$message.success(msg);
        setTimeout(function() {
          that.$blackRoute({ path: "/role_managen", query: {}, that: this }); // 返回指定路由-删除标题栏
        }, 500);
      }
    }
  },
  mounted() {
    this.$setRouteTitle();
    this.getData();
    this.current_path = this.$route.path;
  },
  created() {},
  computed: {
    getNavList() {
      return this.$store.getters.getNavList;
    }
  },
  activated() {
    let flag = false;
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.$setRouteTitle();
      this.getData();
    }
  },
  deactivated() {
    let flag = false; //是否保留数据
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.form = {
        role_id: 0,
        status: "", // 状态
        remark: "", // 备注
        role_name: "" // 角色名称
      };
      this.defaultProps = {
        children: "list",
        label: "permission_name",
        disabled: "disabled"
      };
    }
  }
};
</script>


<style lang="less"  :scope="true">
.role_managen_amend {
  padding: 10px 10px 20px 10px;
  background: #ffffff;

  .btn_list {
    margin-top: 25px;
    margin-left: 55px;
    width: 200px;
    justify-content: space-around;
  }

  .impower_list {
    width: 550px;
    margin-top: 15px;
    .impower_list_title {
      width: 130px;
      text-align: right;
    }
    .impower_list_tree {
      margin-left: 15px;
    }
  }
  .remark_list {
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    margin-top: 15px;
    .remark_name_title {
      width: 130px;
      text-align: right;
    }
    .remark_name_textarea {
      margin-left: 15px;
      width: 100%;
    }
  }
  .state_list {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_title {
      width: 130px;
      text-align: right;
    }
    .state_list_btn {
      margin-left: 15px;
    }
  }
  .character_name {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_input {
      margin-left: 15px;
      width: 100%;
    }
    .character_name_title {
      width: 130px;
      text-align: right;
    }
    .character_name_title:before {
      content: "*";
      color: red;
    }
  }
}
</style>